<template>
  <div style="padding: 5px 15px 30px 15px">
    <nut-cell-group title="今日课程">
      <nut-cell :title="c.title" :sub-title="c.time" :desc="c.classroom" v-for="(c, i) in courses"
                v-bind:key="i"></nut-cell>
    </nut-cell-group>
    <div v-if="courses.length === 0 && !loading" style="text-align: center;padding: 100px 0">
      <nut-icon name="order" color="#64b578" size="48"></nut-icon>
      <br>
      暂无课程
    </div>

    <div v-if="loading" style="text-align: center;padding: 100px 0">
      <nut-icon name="loading" />
      <div>加载中...</div>
    </div>
  </div>
</template>

<script>
import global from "@/components/global";

export default {
  name: "home",
  data() {
    return {
      courses: [],
      loading: false
    }
  },
  methods: {
    loadData() {
      let that = this
      this.loading = true
      global.http(this, 'api/user/course/', {
        success(r) {
          let now = new Date().getDay()
          let cs = r.data.course.filter(c => c.week.filter(w => w === r.data.week.current).length > 0 && c.day === (now == 0 ? 7 : now))
          cs = cs.map(c => {
            c.time = r.data.time.small.filter(s => c.section.filter(sec => sec === s.title).length > 0);
            return c
          })
          cs = cs.map(c => {
            c.time = `${c.time[0].s}-${c.time[c.time.length - 1].e}`;
            return c
          })
          that.courses = cs
        },
        complete(){
          that.loading = false
        }
      })
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

<style scoped>

</style>